import React, { useEffect, useState, useRef } from 'react'
import {
  Table,
  Button,
  Space,
  Modal,
  Switch,
  Form,
  notification,
  message,
} from 'antd'
import {
  EditOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
  UploadOutlined,
} from '@ant-design/icons'
import axios from 'axios'
import { Link, useNavigate } from 'react-router-dom'

const { confirm } = Modal

export default function NewsDraft() {
  const [dataSource, setDataSource] = useState([])
  const [rightList, setRightList] = useState([])
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [currentRights, setCurrentRights] = useState([])
  const [currentRole, setCurrentRole] = useState('')
  const navigateTo = useNavigate()

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '新闻标题',
      dataIndex: 'title',
      render: (title, item) => {
        return <Link to={`/news-manage/preview/${item.id}`}>{title}</Link>
      },
    },
    {
      title: '作者',
      dataIndex: 'author',
    },
    {
      title: '分类',
      dataIndex: 'category',
      render: (category) => {
        return category.title
      },
    },
    {
      title: '操作',
      render: (item) => {
        return (
          <div>
            <Space>
              <Button
                danger
                type="primary"
                shape="circle"
                icon={<DeleteOutlined />}
                onClick={() => comfirmHandler(item)}
              ></Button>

              <Button
                type="primary"
                shape="circle"
                icon={<EditOutlined />}
                onClick={() => {
                  navigateTo('/news-manage/update/' + item.id)
                }}
              ></Button>
              <Button
                type="primary"
                shape="circle"
                icon={<UploadOutlined />}
                onClick={() => handleCheck(item.id)}
              ></Button>
            </Space>
          </div>
        )
      },
    },
  ]
  const { username } = JSON.parse(localStorage.getItem('xinwen-token'))
  useEffect(() => {
    getTableList()
  }, [])
  const getTableList = () => {
    axios
      .get(`/news?author=${username}&auditState=0&_expand=category`)
      .then((res) => {
        setDataSource(res.data)
      })
  }

  const comfirmHandler = (item) => {
    confirm({
      title: '确定要删除吗?',
      icon: <ExclamationCircleOutlined />,
      content: 'Some descriptions',
      onOk() {
        deleteHandler(item)
      },
      onCancel() {
        console.log('Cancel')
      },
    })
  }
  const deleteHandler = (item) => {
    axios.delete('/news/' + item.id).then((res) => {
      getTableList()
    })
  }

  const handleCheck = (id) => {
    axios
      .patch('/news/' + id, {
        auditState: 1,
      })
      .then((res) => {
        message.success('提交成功')
        let path = '/audit-manage/list'
        notification.open({
          message: '通知',
          description: `你可在审核列表中查看`,
          placement: 'bottomRight',
        })

        navigateTo(path)
      })
      .catch((err) => {})
  }
  return (
    <>
      <Table
        dataSource={dataSource}
        columns={columns}
        rowKey={(item) => item.id}
        pagination={{
          pageSize: 5,
        }}
      />
    </>
  )
}
